<template>
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="false">
			<block v-slot:backText>返回</block>
			<block v-slot:content>消息中心({{0}})</block>
		</cu-custom>
		<!-- 可用积分 end -->
		<view class="integrals-mall">
			<view class="navbar">
				<view class="item" :class="{active: memberType==0}" @tap="handleSwitchMemberType(0)">商家消息({{productList.length}})</view>
				<view class="item" :class="{active: memberType==100}" @tap="handleSwitchMemberType(100)">平台消息({{0}})</view>
				<view class="item" :class="{active: memberType==101}" @tap="handleSwitchMemberType(101)">社区消息({{0}})</view>
			</view>
			<view class="list-wrapper">
				<view v-if="productList.length" class="cu-list menu-avatar">
					<view @click="handleItem(item)" class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
						v-for="(item,index) in productList" :key="index" @touchstart="ListTouchStart" @touchmove="ListTouchMove"
						@touchend="ListTouchEnd" :data-target="'move-box-' + index">
						<view v-if="item.shopLogo" class="cu-avatar round lg"
							:style="[{backgroundImage:'url('+item.shopLogo+')'}]">
						</view>
						<view v-else class="cu-avatar round lg">
							<image class="cu-avatar round" src="../../static/logo.jpg"></image>
						</view>
						<view class="content">
							<view style="width: 7rem;" class="text-grey text-sigle">{{item.title}}</view>
							<view class="text-gray text-sm text-sigle">
								<text class="cuIcon-infofill text-red  margin-right-xs"></text> {{item.content}}
							</view>
						</view>
						<view style="width:5rem;" class="action padding-right">
							<view class="text-grey text-xs" style="width:5rem;">{{item.createTime}}</view>
							<!-- <view class="cu-tag round bg-grey sm">5</view> -->
						</view>
						<view class="move">
							<view class="bg-grey">置顶</view>
							<view class="bg-red">删除</view>
						</view>
					</view>
				</view>
				<view class="no-order-content" v-else>
					<image src="/static/images/order/default_img_order.png"></image>
					<view>暂无消息</view>
				</view>
			</view>

			<nomore text="没有更多了" :visible="!loading && productList.length > 0"></nomore>
		</view>
	</view>
</template>

<script >
	import nomore from '@/components/nomore/nomore.vue'
	import cuCustom from '@/components/header/cu-custom.vue';
	import {
		list
	} from '@/common/api/message';
	import { useSettingStore } from '@/stores/index';
	import {
		accountInfo
	} from '@/common/api/user';
	
	export default {
		components: {
			nomore,
			cuCustom
		},
		data() {
			const setting = useSettingStore();
			return {
				setting,
				loading: false,
				productList: [{
					"id": "",
					"createUserId": "",
					"parentId": "",
					"shopId": "",
					"shopName": null,
					"shopLogo": "",
					"userId": "",
					"userName": null,
					"userAvatar": "",
					"title": "",
					"content": "",
					"relevanceId": "0",
					"type": 0,
					"typeName": null,
					"level": 0,
					"sendAll": true,
					"send": true,
					"perusal": false,
					"createTime": "2023-12-02 20:25:09"
				}],
				memberType: 0,
				listTouchStart: 0,
				listTouchDirection: null,
				modalName: null,
				queryParams: {
					userId: 0,
					parentId: 0,
					type:0,
					page:1,
					size:50
				}
			}
		},
		async onLoad() {
			this.productList=[]
			await this.onUser()
		},
		methods: {
			async onUser() {
				if (this.setting.getToken().length == 0) {
					return
				}
				accountInfo({}).then((res) => {
					if (res.code == 1000) {
						this.queryParams.userId = res.data.id;
						this.queryParams.parentId = 0;
						this.onMessageList()
					} else {
						uni.showModal({
							title: res.msg
						});
					}
				});

			},
			async onMessageList() {
				const res = await list(this.queryParams);
				if (res.code == 1000) {
					this.productList = res.data.rows
				} else {
					uni.showModal({
						title: res.msg
					});
				}
			},
			handleItem(item) {
				uni.navigateTo({
					url: '/views/other/serverchat?shopid='+item.shopId
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			detail(product) {
				uni.navigateTo({
					url: '/pages/integrals/detail?id=' + product.id
				})
			},
			async handleSwitchMemberType(memberType) {
				this.memberType = memberType
				this.queryParams.type=memberType
				await this.onMessageList()
			},
			async getProductList() {
				this.loading = true
				if (this.memberType == 0) {
					this.productList = [{}]
				} else {
					this.productList = []
				}

				// const productList = await this.$api('productList')
				// this.productList = productList.filter(item => item.member_type == this.memberType)
				this.loading = false
			},
			integralScores() {
				uni.navigateTo({
					url: '/pages/integrals/scores'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: auto;
	}

	.integrals-section {
		position: relative;
		margin-top: -100rpx;
		background: url('@/static/images/mall/me_img_banner_mall.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 420rpx;
		padding: 30rpx 40rpx;
		padding-top: 130rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;

		.integrals {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-size-sm;
			color: $text-color-grey;

			.value {
				font-family: 'neutra';
				font-size: 72rpx;
				margin-top: 10rpx;
			}
		}

		.menu {
			display: flex;
			align-items: center;
			font-size: $font-size-base;

			.divider {
				height: 20rpx;
				width: 1rpx;
				background-color: $text-color-base;
				margin: 0 30rpx;
			}
		}
	}

	.integrals-mall {
		.navbar {
			position: sticky;
			background-color: $bg-color-white;
			top: 0;
			z-index: 10;
			border-bottom: 1rpx solid rgba($color: $border-color, $alpha: 0.3);
			font-size: $font-size-base;
			color: $text-color-assist;
			height: 110rpx;
			display: flex;
			align-items: stretch;

			.item {
				padding: 0 30rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $font-size-sm;

				&.active {
					color: $color-primary;
					font-size: $font-size-base;

					&:after {
						content: ' ';
						height: 4rpx;
						background-color: $color-primary;
						width: 100rpx;
						margin-top: 10rpx;
					}
				}
			}
		}

		.list-wrapper {
			background-color: $bg-color-white;

			.list {
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 50rpx;

				.item {
					width: 375rpx;

					.image {
						width: 100%;
					}

					.info {
						display: flex;
						flex-direction: column;
						padding: 0 20rpx;

						.title {
							font-size: $font-size-base;
							margin-bottom: 30rpx;
						}

						.score {
							display: flex;
							align-items: baseline;
							font-size: $font-size-sm;
							color: $text-color-assist;

							.value {
								color: $color-primary;
								font-size: $font-size-lg;
							}
						}
					}
				}
			}

			.no-order-content {
				height: calc(100vh - 230rpx);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $font-size-lg;

				image {
					width: 360rpx;
					height: 300rpx;
					margin-bottom: $spacing-row-lg;
				}
			}

			.star-member-intro {
				width: 100%;
				padding: 30px 25px 0;

				.content {
					background-color: #fefbf0;
					border-radius: 50rem !important;
					line-height: 2.6rem;
					display: flex;
					padding: 0 30rpx;
					font-size: $font-size-sm;

					.image {
						position: relative;
						width: 146rpx;
						margin-top: -40rpx;
					}

					.to-see {
						margin-left: 20rpx;
						display: flex;
						align-items: center;
						color: $color-primary;

						image {
							width: 16rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>